<template>
  <div
    class="originProject preview-form"
    style=" background:rgba(255, 255, 255, 0);"
  >
    <div class="comCard">
      <Card dis-hover style=" margin-bottom:15px;">
        <div
          class="comLabel"
          style=" padding:15px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E6E6E6; font-size:16px; font-weight:bold;"
        >
          <p>
            &nbsp;项目经验列表
          </p>

          <div class="btnGroup">
            <div>
              <router-link to="/features/project/proAdd">
                <Button icon="md-add" type="primary">新增</Button>
              </router-link>
            </div>

            <div>
              <Button
                icon="md-refresh"
                @click="
                  refreshSearch({
                    formId: '',
                    ajaxUrl: '',
                    tableId: 'aa3618d5dee3b',
                    reformId: '',
                    pageRecordId: '',
                  })
                "
              >
                刷新
              </Button>
            </div>
          </div>
        </div>
        <div class="comQuery " style=" padding:15px;">
          <Form inline>
            <Form-item>
              <Select
                v-model="searchSearchKey"
                not-found-text="暂无数据"
                :disabled="searchMore"
                transfer
                transfer-class-name="customTransfer"
                class=""
                style=" width:160px;"
              >
                <Option
                  v-for="(item, index) in searchQuery"
                  :value="item.value"
                  :key="index"
                  @click.native="searchQuerySelect(item)"
                >
                  {{ item.label }}
                </Option>
              </Select>
            </Form-item>
            <Form-item>
              <div v-for="(colum, cindex) in searchQuery" :key="cindex">
                <div v-if="searchType === colum.type && searchType === 'text'">
                  <Input
                    v-bind="colum.props"
                    v-model="colum.mValue"
                    v-if="colum.value === searchSearchKey"
                    :disabled="searchSearchMore"
                    class=""
                    style=" width:280px;"
                  ></Input>
                </div>
                <div
                  v-if="searchType === colum.type && searchType === 'select'"
                >
                  <Select
                    v-if="colum.value === searchSearchKey"
                    v-bind="colum.props"
                    :disabled="searchSearchMore"
                    transfer
                    class="customSelect "
                    v-model="colum.mValue"
                    style=" width:280px;"
                  >
                    <Option
                      v-for="(item, iIndex) in colum.optionList"
                      :key="iIndex"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </div>
                <div v-if="searchType === colum.type && searchType === 'date'">
                  <DatePicker
                    v-bind="colum.props"
                    v-if="colum.value === searchSearchKey"
                    :disabled="searchSearchMore"
                    class=""
                    v-model="colum.mValue"
                    transfer
                    style=" width:280px;"
                  ></DatePicker>
                </div>
              </div>
            </Form-item>
            <Form-item>
              <Button
                name="查询"
                icon="md-search"
                type="primary"
                @click="searchQuerySearch()"
              >
                查询
              </Button>
              <Button name="组合查询" @click="searchsearchMore()">
                组合查询&nbsp;
                <Icon type="ios-arrow-down" v-show="!searchSearchMore" />
                <Icon type="ios-arrow-up" v-show="searchSearchMore" />
              </Button>
            </Form-item>
            <div class="searchMoreBox" v-if="searchSearchMore">
              <Form-item v-for="(item, index) in searchQuery" :key="index">
                <div v-if="item.type === 'text'">
                  <div class="inline">
                    <span class="label ">{{ item.label }}</span>
                    <Input
                      v-bind="item.props"
                      class=""
                      v-model="item.mValue"
                    ></Input>
                  </div>
                </div>
                <div v-if="item.type === 'select'">
                  <div class="inline">
                    <span class="label ">{{ item.label }}</span>
                    <Select
                      v-bind="item.props"
                      transfer
                      class="customSelect  "
                      v-model="item.mValue"
                    >
                      <Option
                        v-for="(citem, iIndex) in item.optionList"
                        :key="iIndex"
                        :value="citem.value"
                      >
                        {{ citem.label }}
                      </Option>
                    </Select>
                  </div>
                </div>
                <div v-if="item.type === 'date'">
                  <div class="inline">
                    <span class="label ">{{ item.label }}</span>
                    <DatePicker v-model="item.mValue" class=""></DatePicker>
                  </div>
                </div>
              </Form-item>
            </div>
          </Form>
        </div>
      </Card>
    </div>
    <div class="comTabel">
      <Table
        :columns="ProjectListTable"
        :data="ProjectListTableData"
        :height="500"
        :show-header="true"
        :border="true"
      >
        <template slot-scope="{ row, column }" slot="auto">
          <component :is="column.type" :data="row[column.key]"></component>
        </template>
        <template slot-scope="{ row, column }" slot="action">
          <router-link
            :to="{
              path: '/features/project/proDetails',
              query: {
                recordId: row.recordId,
                pageRecordId: '',
                parentUuid: '',
              },
            }"
            v-if="column.detailType.open"
          >
            <Button type="info" size="small" style="margin-right: 5px">
              详情
            </Button>
          </router-link>

          <router-link
            :to="{
              path: '/features/project/proEdit',
              query: {
                recordId: row.recordId,
                pageRecordId: '',
                parentUuid: '',
              },
            }"
            v-if="column.updateType.open"
          >
            <Button type="primary" size="small" style="margin-right: 5px">
              编辑
            </Button>
          </router-link>

          <Button
            type="error"
            size="small"
            v-if="column.delType.open"
            @click="ProjectListDelTableData({ row, delType: column.delType })"
          >
            <span>删除</span>
          </Button>
        </template>
      </Table>

      <div class="dt-page right">
        <Page
          :page-size="10"
          :show-total="true"
          :show-elevator="true"
          :show-sizer="true"
          :page-size-opts="[10, 20, 30]"
          :currentPage="1"
          :current.sync="ProjectListPageConfig.current"
          :total="ProjectListPageConfig.total"
          @on-change="ProjectListPageChange"
          @on-page-size-change="ProjectListPageSizeChange"
          style=" padding-top:15px; padding-bottom:15px;"
        ></Page>
      </div>
    </div>
  </div>
</template>
<script>
import selfComponents from "@/components/comm/dtTable/components";
import echarts from "echarts";
import { areaValue, areaData } from "@/libs/common";
import { chartOn, chartOff } from "@/libs/tools";
import area from "@/components/comm/area";

export default {
  components: {
    ...selfComponents,
  },
  data() {
    return {
      searchQuery: [
        {
          value: "projectName",
          type: "text",
          label: "项目名称",
          operate: "lk",
          props: { placeholder: "请输入项目名称", clearable: true },
          productionUrl: "",
          optionList: [
            { label: "选项一", value: "key1" },
            { label: "选项二", value: "key2" },
          ],
          mValue: "",
        },
        {
          value: "introduce",
          label: "简介",
          type: "text",
          operate: "lk",
          optionList: [],
          productionUrl: "",
          props: { placeholder: "请输入简介", clearable: true },
          mValue: "",
        },
      ],
      searchSearchKey: "projectName",
      searchType: "text",
      searchSearchMore: false,
      searchMore: false,
      ProjectListTableData: [],
      ProjectListTable: [
        { type: "selection", width: 60, align: "center" },
        {
          title: "项目名称",
          key: "projectName",
          type: "dtText",
          slot: "auto",
          align: "left",
          custom: true,
        },
        {
          title: "简介",
          key: "introduce",
          type: "dtText",
          slot: "auto",
          align: "left",
          custom: true,
        },
        {
          title: "操作",
          slot: "action",
          key: "action",
          width: "200",
          fixed: "",
          align: "center",
          detailType: {
            open: true,
            url: "http://mock.xundacloud.com/autoCoding/project/byKeyPageData",
            productionUrl: "",
            functionPath: "/features/project/proDetails",
            functionType: "route",
            pageRecordId: 447,
          },
          delType: {
            open: true,
            url: "http://mock.xundacloud.com/autoCoding/project/delPageData",
            productionUrl: "/sys/sysPorjectExperience/del",
            callbackEvent: [
              {
                eventCondition: "success",
                conditionName: "",
                eventType: "queryTable",
                eventName: "",
                pageRecordId: "",
                tableRecordId: ["aa3618d5dee3b"],
                otherPage: false,
              },
            ],
            confirm: true,
          },
          updateType: {
            open: true,
            url: "http://mock.xundacloud.com/autoCoding/project/updPageData",
            productionUrl: "",
            functionPath: "/features/project/proEdit",
            functionType: "route",
            pageRecordId: 446,
          },
          customBtnSwitch: {
            open: false,
            customBtns: [
              {
                name: "自定义按钮",
                propertyName: "",
                disabledKey: "",
                disabledValue: [],
                props: {
                  icon: "",
                  type: "",
                  shape: "",
                  long: "",
                  size: "",
                  ghost: false,
                },
                operation: {
                  functionPath: "",
                  functionType: "",
                  loadUrl: "",
                  productionUrl: "",
                  ajaxUrl:
                    "http://mock.xundacloud.com/autoCoding/project/addPageData",
                  formId: "",
                  pageRecordId: "",
                  reformId: "",
                  tableId: "",
                  design: {},
                  params: [{ name: "" }],
                },
                customStyle: { width: "" },
              },
            ],
          },
        },
      ],
      tableList: [
        {
          tableId: "ProjectListTable",
          parentUuid: "",
          pageRecordId: "",
          "page-size": 10,
        },
      ],
      ProjectListPageConfig: { "page-size": 10, current: 1, total: 0 },
      pageRecordId: "445",
      adminAddress: "http://test.xundacloud.com:8081/xundacloudDemeAdmin",
      area,
    };
  },
  mounted() {
    this.getProjectList();
  },
  methods: {
    refreshSearch() {
      this.getProjectList({
        pSize: this.ProjectListPageConfig["page-size"],
        pNum: 1,
      });
    },

    searchQuerySelect(item) {
      this.searchType = item.type;
      this.searchQuery.forEach(colum => {
        colum.mValue = "";
        return colum;
      });
    },

    searchQuerySearch() {
      const paramList = [];
      this.searchQuery &&
        this.searchQuery.forEach(query => {
          if (query.mValue) {
            paramList.push({
              key: query.value,
              value: query.mValue,
              operate: query.operate,
            });
          }
        });

      this.ProjectListAcceptParams &&
        this.ProjectListAcceptParams.forEach(acceptParam => {
          if (acceptParam.value) {
            paramList.push({
              key: acceptParam.acceptNewKey,
              value: acceptParam.value,
              operate: acceptParam.operate,
            });
          }
        });

      this.getProjectList({
        pSize: this.ProjectListPageConfig["page-size"],
        pNum: 1,
        paramList,
      });
    },

    searchsearchMore() {
      this.searchSearchMore = !this.searchSearchMore;
    },

    getProjectList(params = "") {
      if (!params) {
        params = {
          pSize: this.ProjectListPageConfig["page-size"],
          pNum: this.ProjectListPageConfig.current,
        };
      }
      this.axios
        .post("/sys/sysPorjectExperience/findList", {
          data: JSON.stringify({ ...params }),
        })
        .then(resp => {
          const { code, data } = resp.data;
          if (code === "E0") {
            this.ProjectListTableData = data.list;
            this.ProjectListPageConfig.total = data.total;
          } else {
            this.ProjectListTableData = [];
          }
        });
    },
    ProjectListPageChange(value) {
      this.getProjectList();
    },
    ProjectListPageSizeChange(value) {
      this.ProjectListPageConfig.current = 1;
      this.ProjectListPageConfig["page-size"] = value;
      this.getProjectList();
    },

    ProjectListDelTableData({
      row,
      delType,
      pageRecordId,
      parentUuid,
      tableId,
    }) {
      if (!delType) return;
      if (delType && delType.confirm) {
        this.$Modal.confirm({
          title: "删除提示",
          content: "确定删除此数据吗？",
          onOk: () => {
            this.ProjectListDelItem({
              recordId: row.recordId,
              pageRecordId,
              parentUuid,
              tableId,
              delType,
            });
          },
        });
      } else {
        this.ProjectListDelItem({
          recordId: row.recordId,
          pageRecordId,
          parentUuid,
          tableId,
          delType,
        });
      }
    },
    async ProjectListDelItem({
      recordId,
      pageRecordId,
      parentUuid,
      tableId,
      delType,
    }) {
      const resp = await this.axios.post(
        delType.productionUrl ? delType.productionUrl : delType.url,
        {
          data: JSON.stringify([recordId]),
        },
      );
      const { code, message } = resp.data;
      if (code === "E0") {
        this.$Message.success("删除数据成功");
        this.getProjectList();
      } else {
        this.$Message.error(message);
      }
    },

    async getProjectListChild(row) {},

    gotoPage(functionPath) {
      this.$router.push({ path: functionPath });
    },
  },
};
</script>
